import React from 'react'
import './SaasConfig.scss'
import { Row, Col, Button, Checkbox , Pagination, Calendar, Modal, DatePicker,Tabs, message  } from 'antd';
import echarts from 'echarts'
import moment from 'moment';
import { WarningOutlined ,EditOutlined} from '@ant-design/icons';
import cookie from 'react-cookies'
import { getCustomerMenu,saveCustomerMenu, saveCustomerOptionMenu} from '../../../api/hardwareCenter'
import {getMenu,getUserMenu} from '../../../api/accountManage'
const { RangePicker } = DatePicker;
const { TabPane } = Tabs; 
const CheckboxGroup = Checkbox.Group


class SaasConfig extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            total_list: [],
            current: 1,
            pageSize: 10,
            total_count: 0,
            industryjobBox:false,
            basifunctions2:false,
            checkAll:false, 
            setOk:false,
            indeterminate:true,
            ah_list:[],
            ah_listFree:[],
            ah_list3:[],
            ah_list2:[],
            ah_list_tmp: [
                {
                    one: {
                        isChecked: false,
                        value:  '一级1',
                    },
                    lt: [{
                        id: 1,
                        label: '二级1',
                        value: '二级1',
                    },{
                        id: 2,
                        label: '二级2',
                        value: '二级2',
                    },],
                    ck_lt: [],
                },{
                    one: {
                        isChecked: false,
                        value:  '一级2',
                    },
                    lt: [{
                        id: 1,
                        label: '二级1',
                        value: '二级1',
                    },{
                        id: 2,
                        label: '二级2',
                        value: '二级2',
                    },],
                    ck_lt: [],
                    editName:'',
                  
                }
            ],
            menuid:[],
            menuid2:[],
            type:'',
            ah_check_list:[],
            industryjobFree:false,
            saveMenuIdBase:[],
            saveMenuIdFree:[],
            menudefault:['1','7','22','23','9','26']
          
        }
    }

    componentDidMount(){
        this.getCustomerMenu2Base()
        this.getCustomerMenu2Free()
    }
    

    // 基础的全部
    getCustomerMenu() {

        let _this = this;
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            
        }

        getCustomerMenu(post_data).then(res => {
           
            let mt = res.data.menu;
            console.log('mt',mt)
            console.log('menuid',this.state.menuid)
            mt&&mt.length>0&&mt.forEach((val, ind) => {
                val.ck_lt = [];
                if(this.state.menuid){
                    this.state.menuid.map((e,i)=>{
                    
                    
                        if(val.id == e){
                            console.log('同')
                            val.ck_lt.push(e)
                        }
                        if(val.children && val.children.length > 0){
                            val.children.map((item,index)=>{
                                if(item.id == e){
                                    console.log('同子')
                                    val.ck_lt.push(e)
                                }
                            })
                        }
                        
                    })
                }
               
                
            });
            _this.setState({
                ah_list: mt
            },()=>{
                // wwwww
                console.log('ah_list',this.state.ah_list)
                console.log(this.state.menuid.includes('2'))
            })
            
        })
    }
    // 可选的全部
    getCustomerMenu2() {

        let _this = this;
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            
        }

        getCustomerMenu(post_data).then(res => {
           
            let mt = res.data.menu;
            console.log('mt',mt)
            console.log('menuid',this.state.menuid2)
            mt&&mt.length>0&&mt.forEach((val, ind) => {
                val.ck_lt = [];
                if(this.state.menuid2){
                    this.state.menuid2.map((e,i)=>{
                    
                    
                        if(val.id == e){
                            console.log('同')
                            val.ck_lt.push(e)
                        }
                        if(val.children && val.children.length > 0){
                            val.children.map((item,index)=>{
                                if(item.id == e){
                                    console.log('同子')
                                    val.ck_lt.push(e)
                                }
                            })
                        }
                        
                    })
                }
               
                
            });
            _this.setState({
                ah_listFree: mt
            },()=>{
                // wwwww
                console.log('ah_list',this.state.ah_listFree)
                
            })
            
        })
    }

    // 获取基础菜单
    getCustomerMenu2Base() {
        let _this = this;
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            type:'1'
        }

        getCustomerMenu(post_data).then(res => {

            if(res.code == 0){
                let mt = res.data.menu;
                mt&&mt.length>0&&mt.forEach((val, ind) => {
                    val.ck_lt = [];
                    if(this.state.menuid){
                        this.state.menuid.map((e,i)=>{
                        
                        
                            if(val.id == e){
                                console.log('同')
                                val.ck_lt.push(e)
                            }
                            if(val.children && val.children.length > 0){
                                val.children.map((item,index)=>{
                                    if(item.id == e){
                                        console.log('同子')
                                        val.ck_lt.push(e)
                                    }
                                })
                            }
                            
                        })
                    }
                });
                let allmenu = res.data.menu_id.split(',').concat(this.state.menudefault)
                this.setState({
                    ah_list3: mt,
                    menuid:res.data.menu_id?allmenu:''
                })
            }
                
           
            
        })
    }
    // 获取可选菜单
    getCustomerMenu2Free() {
        let _this = this;
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            type:'2'
        }

        getCustomerMenu(post_data).then(res => {
            if(res.code == 0){
                let mt = res.data.menu;
                
                console.log('mt',mt)
                console.log('111111111',this.state.menuid2)
                mt&&mt.length>0&&mt.forEach((val, ind) => {
                    val.ck_lt = [];
                    if(this.state.menuid2){
                        this.state.menuid2.map((e,i)=>{
                            if(val.id == e){
                                console.log('同')
                                val.ck_lt.push(e)
                            }
                            if(val.children && val.children.length > 0){
                                val.children.map((item,index)=>{
                                    if(item.id == e){
                                        console.log('同子')
                                        val.ck_lt.push(e)
                                    }
                                })
                            }
                        })
                    }
                });
                _this.setState({
                    ah_list2: mt,
                    menuid2:res.data.menu_id?res.data.menu_id.split(','):''
                })
            }
        })
    }
    // jichu
    onCheckAllChange(ind, e) {
        let _this = this;
        let flag = e.target.checked;
        let { ah_list } = _this.state;
        
    
        if(flag){
            if(!ah_list[ind].ck_lt.includes(ah_list[ind].id)){
                ah_list[ind].ck_lt.push(ah_list[ind].id);
            }
        }else {
            if(ah_list[ind].ck_lt.includes(ah_list[ind].id)){
                ah_list[ind].ck_lt.splice(ah_list[ind].ck_lt.indexOf(ah_list[ind].id), 1);
            }
        }

        if(ah_list[ind].children && ah_list[ind].children.length > 0){
            let ah_list_children = ah_list[ind].children;
            ah_list_children.map((val, index) => {
                if(1 != val.can_not_change){
                    if(flag){
                        val.default_selected = '1';
                        if(!ah_list[ind].ck_lt.includes(val.id)){
                            ah_list[ind].ck_lt.push(val.id);
                        }
                    }else {
                        val.default_selected = '0';
                        ah_list[ind].ck_lt.splice(ah_list[ind].ck_lt.indexOf(val.id), 1);
                    }
                }
            })
        }

        ah_list[ind].default_selected = flag ? 1 : 0;
        _this.setState({
            ah_list,
        })
    }
    // kexuan
    onCheckAllChange2(ind, e) {
        let _this = this;
        console.log(e.target.checked)
        let flag = e.target.checked;
        let { ah_listFree } = _this.state;
        
    
        if(flag){
            if(!ah_listFree[ind].ck_lt.includes(ah_listFree[ind].id)){
                ah_listFree[ind].ck_lt.push(ah_listFree[ind].id);
            }
        }else {
            if(ah_listFree[ind].ck_lt.includes(ah_listFree[ind].id)){
                ah_listFree[ind].ck_lt.splice(ah_listFree[ind].ck_lt.indexOf(ah_listFree[ind].id), 1);
            }
        }

        if(ah_listFree[ind].children && ah_listFree[ind].children.length > 0){
            let ah_list_children = ah_listFree[ind].children;
            ah_list_children.map((val, index) => {
                if(1 != val.can_not_change){
                    if(flag){
                        val.default_selected = '1';
                        if(!ah_listFree[ind].ck_lt.includes(val.id)){
                            ah_listFree[ind].ck_lt.push(val.id);
                        }
                    }else {
                        val.default_selected = '0';
                        ah_listFree[ind].ck_lt.splice(ah_listFree[ind].ck_lt.indexOf(val.id), 1);
                    }
                }
            })
        }

        ah_listFree[ind].default_selected = flag ? 1 : 0;
        _this.setState({
            ah_listFree,
        })
    }
    // jichu
    onChangeget(ind, list) {        
        let _this = this;
        let { ah_list } = _this.state;

        ah_list[ind].ck_lt = list;

        if(ah_list[ind].children){
            ah_list[ind].children.map((val, ind) => {
                if(list){
                    if(list.includes(val.id)){
                        val.default_selected = 1;
                    }else {
                        val.default_selected = 0;
                    }
                }
            })
        }

        if(list.length > 0){
            ah_list[ind].default_selected = 1;

            if(!ah_list[ind].ck_lt.includes(ah_list[ind].id)){
                ah_list[ind].ck_lt.push(ah_list[ind].id);
            }
        }else {
            ah_list[ind].default_selected = 0;
        }
        _this.setState({
            ah_list: ah_list
        })
    }
    // kexuan
    onChangeget2(ind, list) {        
        let _this = this;
        let { ah_listFree } = _this.state;

        ah_listFree[ind].ck_lt = list;

        if(ah_listFree[ind].children){
            ah_listFree[ind].children.map((val, ind) => {
                if(list){
                    if(list.includes(val.id)){
                        val.default_selected = 1;
                    }else {
                        val.default_selected = 0;
                    }
                }
            })
        }

        if(list.length > 0){
            ah_listFree[ind].default_selected = 1;

            if(!ah_listFree[ind].ck_lt.includes(ah_listFree[ind].id)){
                ah_listFree[ind].ck_lt.push(ah_listFree[ind].id);
            }
        }else {
            ah_listFree[ind].default_selected = 0;
        }
        _this.setState({
            ah_listFree: ah_listFree
        })
    }

    // 点击变更基础
    // wwwww
    editPosition = () => {
       const {menuid} = this.state
        // 获取默认值
        this.getCustomerMenu();
        this.setState({
            industryjobBox:true,
            
        })
    }

    // 点击变更可选配
    editPosition2 = () => {
        const { type, menuid } = this.state
       
        // 获取默认值
        this.getCustomerMenu2();
        this.setState({
            industryjobFree:true,
            
           // menuid:menuid?menuid.split(','):''
            
        })
    }
	
    toChange = () => {
        this.setState({
            industryjobBox:true
        })
    }

    toChange2 = () => {
        this.setState({
            basifunctions2:true
        })
    }

  
    // 基础弹窗保存
    handleChange2 = (e) =>{
        let _this = this;
        let { newPositionName, industryCreate, jobNameChange, jobType, ah_list } = _this.state;
        let ah_check_list = new Array();
        let ah_check_name = new Array();

        ah_list.map((val, ind) => {

            if(val.ck_lt && val.ck_lt.length>0){
                ah_check_list.push(val.ck_lt);
                ah_check_name.push(val.menu_name)
            }
            // if(val.children && val.children.length > 0){
            //     val.children.forEach((v, index) => {
            //         if(val.ck_lt && val.ck_lt.length>0){
            //             ah_check_list.push(v.id);
            //             ah_check_name.push(v.menu_name);
            //         }
            //     })
            // }
            // if(1 == val.default_selected){
            //     ah_check_list.push(val.id);
            //     ah_check_name.push(val.menu_name)
            // }
            // if(val.children && val.children.length > 0){
            //     val.children.forEach((v, index) => {
            //         if(1 == v.default_selected){
            //             ah_check_list.push(v.id);
            //             ah_check_name.push(v.menu_name);
            //         }
            //     })
            // }
        })
        // let arr =ah_check_list.flat();

        _this.setState({
            ah_check_list,
            ah_check_name,
        },()=>{
            console.log('修改',this.state.ah_check_list,this.state.ah_check_name)
        })

        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'type':1,
            'menu_ids':ah_check_list.join(',')
        }
        saveCustomerMenu(post_data).then(res => {
            if(res.code == 0){
                message.success('操作成功！',2,()=>{
                    this.setState({
                        industryjobBox:false,
                       
                    },()=>{
                        this.getCustomerMenu2Base(1)
                    })
                    //window.location.reload()
                })
            }
        })

    }
    // 可选弹窗保存
    handleChangeFree = (e) =>{
        let _this = this;
        let { newPositionName, industryCreate, jobNameChange, jobType, ah_listFree } = _this.state;
        let ah_check_list = new Array();
        let ah_check_name = new Array();

        ah_listFree.map((val, ind) => {

            if(val.ck_lt && val.ck_lt.length>0){
                ah_check_list.push(val.ck_lt);
                ah_check_name.push(val.menu_name)
            }
            // if(val.children && val.children.length > 0){
            //     val.children.forEach((v, index) => {
            //         if(val.ck_lt && val.ck_lt.length>0){
            //             ah_check_list.push(v.id);
            //             ah_check_name.push(v.menu_name);
            //         }
            //     })
            // }
            // if(1 == val.default_selected){
            //     ah_check_list.push(val.id);
            //     ah_check_name.push(val.menu_name)
            // }
            // if(val.children && val.children.length > 0){
            //     val.children.forEach((v, index) => {
            //         if(1 == v.default_selected){
            //             ah_check_list.push(v.id);
            //             ah_check_name.push(v.menu_name);
            //         }
            //     })
            // }
        })
        // let arr =ah_check_list.flat();

        _this.setState({
            ah_check_list,
            ah_check_name,
        },()=>{
            console.log('修改',this.state.ah_check_list,this.state.ah_check_name)
        })

        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'type':2,
            'menu_ids':ah_check_list.join(',')
        }
        saveCustomerOptionMenu(post_data).then(res => {
            if(res.code == 0){
                message.success('操作成功！',2,()=>{
                    this.setState({
                        industryjobFree:false,
                       
                    },()=>{
                        this.getCustomerMenu2Free(1)
                    })
                    //window.location.reload()
                })
            }
        })

    }
    

    render(){
        const { industryjobBox,basifunctions2,indeterminate,checkAll,ah_list,menuid, menuid2,type,setOk,ah_list2,ah_list3, industryjobFree,ah_listFree, menudefault} = this.state;
        return (
            <div id="ContentMainList" className="SaaSmain">
                <Row>
                    {/* 基础功能 */}
                    <Row>
                        <Col span={24} className="basi_functions">
                            <div className="cb_option">
                                <div className="cb_option_one" onClick={this.editPosition.bind(this,1)}>
                                    <a href="javascript:;">变更 <EditOutlined /></a>
                                    <span><div className="titleInfo"></div> 基础功能</span>
                                </div>
                                <div style={{background:'#f7f7f7',marginTop:'10px',padding:'10px',minHeight:'200px'}}>
                                {
                                    (ah_list3&&ah_list3.length>0)? ah_list3.map((item,index) =>{
                                        if(item.children&&item.children!=[]){                                                   
                                            return (
                                                <div  >
                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                    {item.children.map((el,i)=> (
                                                        <span style={{display:'inline-block',margin:'10px',fontSize:'13px'}}>{el.menu_name}</span>
                                                    ))}
                                                </div>
                                            )
                                        }else{
                                            return (
                                                <div>
                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                </div>
                                            )
                                        }
                                        
                                    }):null
                                }</div>
                            </div>
                        </Col>
                    </Row>
                    {/* 可选配功能 */}
                    <Row>
                        <Col span={24} className="basi_functions">
                            <div className="cb_option">
                                <div className="cb_option_one" onClick={this.editPosition2.bind(this,2)}>
                                    <a href="javascript:;">变更 <EditOutlined /></a>
                                    <span><div className="titleInfo"></div> 可选配功能</span>
                                </div>
                                <div style={{background:'#f7f7f7',marginTop:'10px',padding:'10px',minHeight:'200px'}}>
                                {
                                    (ah_list2&&ah_list2.length>0)? ah_list2.map((item,index) =>{
                                        if(item.children&&item.children!=[]){                                                   
                                            return (
                                                <div  >
                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'18px'}}>{item.menu_name}</span>
                                                    {item.children.map((el,i)=> (
                                                        <span style={{display:'inline-block',margin:'10px',fontSize:'14px'}}>{el.menu_name}</span>
                                                    ))}
                                                </div>
                                            )
                                        }else{
                                            return (
                                                <div>
                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'18px'}}>{item.menu_name}</span>
                                                </div>
                                            )
                                        }
                                        
                                    }):null
                                }</div>
                            </div>
                        </Col>
                    </Row>
                    {/* modal */}
                    {/* modal */}
                    {
                        industryjobBox &&
                        <Modal
                            title="[SAAS服务功能]类型维护" 
                            wrapClassName="zrModal"
                            visible={industryjobBox}
                            afterClose={this.afterClose}
                            onCancel={()=>{this.setState({industryjobBox:false})}}
                            footer={[
                                <Button style={{backgroundColor:'#334BFC',borderRadius:'4px'}} key="submit" type="primary" onClick={this.handleChange2.bind()}>
                                保存
                                </Button>,
                                <Button style={{borderRadius:'4px'}} key="back" onClick={()=>{this.setState({industryjobBox:false})}}>
                                    放弃
                                </Button>
                            ]}
                            >
                            <div className="bodytitle">
                                <div style={{minWidth: 80}}>功能类型: </div>
                                <div>基础功能</div>	
                            </div>
                            <div className="addCar">
                                <div className="title"><span>功能包含: </span></div>
                                    <div className="list">
                                        { ah_list.map((val, ind) => (
                                        <div className="ay-wrap" key={ ind }>
                                                <Checkbox className="ck-one" defaultChecked={menuid?menuid.includes(val.id):''} disabled={menudefault?menudefault.includes(val.id):''} onChange={this.onCheckAllChange.bind(this, ind)} >{ val.menu_name }</Checkbox>
                                                { val.children ?
                                                    <CheckboxGroup className="ck-two" value={val.ck_lt}  disabled={menudefault?menudefault.includes(val.id):''}  onChange={this.onChangeget.bind(this, ind) }>
                                                        { val.children.map((vl, index) => (
                                                            <Checkbox   value={ vl.id }  >{ vl.menu_name }</Checkbox>
                                                        ))}
                                                    </CheckboxGroup> : null 
                                                }
                                            </div>
                                        ))}

                                    </div>
                            </div>
                        </Modal>
                    }

                    {
                        industryjobFree &&
                        <Modal
                            title="[SAAS服务功能]类型维护" 
                            wrapClassName="zrModal"
                            visible={industryjobFree}
                            afterClose={this.afterClose}
                            onCancel={()=>{this.setState({industryjobFree:false})}}
                            footer={[
                                <Button style={{backgroundColor:'#334BFC',borderRadius:'4px'}} key="submit" type="primary" onClick={this.handleChangeFree.bind()}>
                                保存
                                </Button>,
                                <Button style={{borderRadius:'4px'}} key="back" onClick={()=>{this.setState({industryjobFree:false})}}>
                                    放弃
                                </Button>
                            ]}
                            >
                            <div className="bodytitle">
                                <div style={{minWidth: 80}}>功能类型: </div>
                                <div>可选配功能</div>	
                            </div>
                            <div className="addCar">
                                <div className="title"><span>功能包含: </span></div>
                                    <div className="list">
                                        { ah_listFree.map((val, ind) => (
                                        <div className="ay-wrap" key={ ind }>
                                                <Checkbox className="ck-one" defaultChecked={menuid2?menuid2.includes(val.id):''} disabled={menuid?menuid.includes(val.id):''} onChange={this.onCheckAllChange2.bind(this, ind)} >{ val.menu_name }</Checkbox>
                                                { val.children ?
                                                    <CheckboxGroup className="ck-two" value={val.ck_lt}   onChange={this.onChangeget2.bind(this, ind) }>
                                                        { val.children.map((vl, index) => (
                                                            <Checkbox   value={ vl.id } disabled={vl.type==1?true:false} >{ vl.menu_name }</Checkbox>
                                                        ))}
                                                    </CheckboxGroup> : null 
                                                }
                                            </div>
                                        ))}

                                    </div>
                            </div>
                        </Modal>
                    }
                   
                </Row>
            </div>
        )
    }
}

export default SaasConfig